<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta charset="UTF-8">
    <title>美团webApp</title>
    <script>
        (function () {
            var docEl = document.documentElement;

            function setRemunit() {
                //获取到rem的基准值
                var docElWidth = docEl.clientWidth || window.innerWidth || docEl.getBoundingClientRect().Width
                var rem = docElWidth / 10;

                //动态设置html根元素的fontSize
                docEl.style.fontSize = rem + 'px';
            }

            setRemunit();
            //窗口大小变化时触发
            window.addEventListener('resize', setRemunit)
            //窗口出现在当前屏幕的时候
            window.addEventListener('pageshow', function (e) {
                if (e.persisted) {
                    setRemunit()
                }
            })
        })();
    </script>
    <link rel="stylesheet" href="../lib/reset.css">
    <link rel="stylesheet" href="./header/header.css">
    <link rel="stylesheet" href="./SearchBar/searchBar.css">
    <link rel="stylesheet" href="./category/category.css">
    <link rel="stylesheet" href="./contentList/contentList.css">
    <link rel="stylesheet" href="starScore/starScore.css">
    <link rel="stylesheet" href="../common/bottomBar/bottomBar.css">
</head>
<body>
<!--头部开始-->
<div class="header">
    <div class="search-bar">
        <div class="bar-location">
            <div class="location-icon"></div>
            <div class="location-text">广州市</div>
        </div>
        <div class="search-btn">
            <p class="place-holder">薯条</p>
        </div>
    </div>
    <img class="header-img"
         src="https://app.nihaoshijie.com.cn/upload/bannertemp.e8a6fa63.jpg" alt="bg">
</div>
<!--头部结束-->

<!--类目开始-->
<div class="category-content clearfix">
</div>
<!--类目结束-->

<!--商家列表开始-->
<div class="list-content">
    <h4 class="list-title">
        <span class="title-line"></span>
        <span>附近商家</span>
        <span class="title-line"></span>
    </h4>
    <div class="list-wrap"></div>
    <div class="loading">加载中</div>
</div>
<!--商家列表结束-->

<!--底部导航栏开始-->
<div class="bottom-bar"></div>
<!--底部导航栏结束-->

<script src="../lib/jquery-3.4.1.min.js"></script>
<script src="./category/category.js"></script>
<script src="./contentList/contentList.js"></script>
<script src="./starScore/starScore.js"></script>
<script src="../common/bottomBar/bottomBar.js"></script>
</body>
</html>